{% extends "base.html" %}

{% block title %}机器人列表 - 机器人管理系统{% endblock %}

{% block page_title %}机器人列表{% endblock %}
{% block page_description %}查看和管理所有机器人设备{% endblock %}

{% block content %}
<div class="bg-white rounded-xl p-6 card-shadow mb-8">
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
        <h3 class="font-bold text-lg">机器人列表</h3>
        <div class="flex flex-col sm:flex-row gap-3">
            <div class="relative">
                <select class="pl-4 pr-10 py-2 rounded-lg border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary appearance-none bg-white">
                    <option>所有类型</option>
                    <option>工业机器人</option>
                    <option>服务机器人</option>
                    <option>物流机器人</option>
                    <option>清洁机器人</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-2 pointer-events-none"></i>
            </div>
            <div class="relative">
                <select class="pl-4 pr-10 py-2 rounded-lg border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary appearance-none bg-white">
                    <option>所有状态</option>
                    <option>运行中</option>
                    <option>待维护</option>
                    <option>故障中</option>
                    <option>已离线</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-2 pointer-events-none"></i>
            </div>
            <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                <i class="fa fa-plus mr-2"></i> 添加机器人
            </button>
        </div>
    </div>
    
    <div class="overflow-x-auto">
        <table class="w-full min-w-[800px]">
            <thead>
                <tr class="border-b border-light-2">
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">ID</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">机器人名称</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">类型</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">状态</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">当前任务</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">运行时长</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for robot in robots %}
                <tr class="border-b border-light-1 hover:bg-light-1/50 transition-colors">
                    <td class="py-4 px-4 font-medium">{{ robot.robot_id }}</td>
                    <td class="py-4 px-4">
                        <div class="flex items-center space-x-3">
                            <img src="https://picsum.photos/id/{{ 1000 + robot.id }}/200/200" alt="{{ robot.name }}" class="w-10 h-10 rounded-lg object-cover">
                            <span>{{ robot.name }}</span>
                        </div>
                    </td>
                    <td class="py-4 px-4">
                        <span class="px-2 py-1 rounded-full text-xs 
                            {% if robot.type == '工业机器人' %}bg-success/10 text-success
                            {% elif robot.type == '服务机器人' %}bg-warning/10 text-warning
                            {% elif robot.type == '物流机器人' %}bg-primary/10 text-primary
                            {% else %}bg-secondary/10 text-secondary{% endif %}">
                            {{ robot.type }}
                        </span>
                    </td>
                    <td class="py-4 px-4">
                        <span class="flex items-center 
                            {% if robot.status == '运行中' %}text-success
                            {% elif robot.status == '待维护' %}text-warning
                            {% else %}text-danger{% endif %}">
                            <span class="w-2 h-2 rounded-full 
                                {% if robot.status == '运行中' %}bg-success animate-pulse
                                {% elif robot.status == '待维护' %}bg-warning
                                {% else %}bg-danger{% endif %} mr-2"></span>
                            {{ robot.status }}
                        </span>
                    </td>
                    <td class="py-4 px-4">{{ robot.current_task or '无' }}</td>
                    <td class="py-4 px-4">{{ robot.runtime }}小时</td>
                    <td class="py-4 px-4">
                        <div class="flex space-x-2">
                            <a href="{{ url_for('robot_detail', robot_id=robot.id) }}" class="text-primary hover:text-primary/80 transition-colors" title="查看详情">
                                <i class="fa fa-eye"></i>
                            </a>
                            <button class="text-dark-2 hover:text-dark transition-colors" title="编辑">
                                <i class="fa fa-edit"></i>
                            </button>
                            <button class="text-dark-2 hover:text-dark transition-colors" title="重启">
                                <i class="fa fa-refresh"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <div class="flex items-center justify-between mt-6">
        <p class="text-sm text-dark-2">显示 1 到 {{ robots|length }}，共 {{ robots|length }} 个机器人</p>
        <div class="flex space-x-1">
            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-light-2 text-dark-2 hover:border-primary hover:text-primary transition-colors">
                <i class="fa fa-chevron-left text-xs"></i>
            </button>
            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-light-2 text-dark-2 hover:border-primary hover:text-primary transition-colors">
                <i class="fa fa-chevron-right text-xs"></i>
            </button>
        </div>
    </div>
</div>
{% endblock %}
